<template>
  <el-col
    :style="{height:heightLength+'px'}"
    class="el-left-menu"
    :span="3"
  >
    <el-menu
      background-color="#324157"
      text-color="#bfcbd9"
      :default-active="active"
      :active="active"
      class="el-menu-vertical-demo"
      router
      unique-opened
    >
      <div
        v-for="(item, index) in routeList"
        :key="index"
      >
        <el-submenu
          v-if="item.childPermissions.length"
          :index="item.menuName"
        >
          <template
            slot="title"
          >
            <span>{{item.menuName}}</span>
          </template>
          <el-menu-item
            v-for="list in item.childPermissions"
            :key="list.menuName"
            :index="list.menuUrl"
          >
            {{list.menuName}}
          </el-menu-item>
        </el-submenu>
        <el-menu-item
          v-if="!item.childPermissions.length"
          class="menu-tag"
          :index="item.menuUrl"
        >
          {{item.menuName}}
        </el-menu-item>
      </div>
    </el-menu>
  </el-col>
</template>


<script>
let CONSTANT = require("../../constant/constant.js"),
  common = require("../../common.js");
var routerList = require("./router-leftBar.js");
// console.log(routerList);
export default {
  data() {
    return {
      active: "",
      routeList: [],
      heightLength: ""
    };
  },
  created() {
    this.leftPermission();
    this.heightLength = document.body.scrollHeight;
  },
  mounted() {
    window.addEventListener("scroll", () => {
      let scrollHeight = document.body.scrollHeight;
      this.heightLength = scrollHeight;
    });
  },
  methods: {
    leftPermission() {

      let url = CONSTANT.URL.SYSTEM.FINDUSERPERMISSIONS;
      common.requestAjax(url, null, null, res => {
        this.routeList = res.data && res.data.bussData ? res.data.bussData : [];
        console.log(this.routeList, res.data.bussData);
        this.active = this.$router.currentRoute.path.split("/")[1] || "/";
      });
    },
    handleOpen(key, keyPath) {},
    handleClose(key, keyPath) {}
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style  lang="scss">
.el-left-menu {
  height: 1000px;
  position: fixed;
  left: 0;
  width: 186px;
}
.el-menu-vertical-demo {
  height: 100%;
}

.el-menu-item {
  min-width: auto !important;
}
.el-menu-item-group__title {
  padding-top: 0px !important;
}
.el-menu-item {
  a {
    display: block;
    color: #bfcbd9;
  }
  &.is-active {
    a {
      color: #21b5cc;
    }
  }
}
</style>
